<template>

<!--  用于引用等的操作按钮-->
  <div>
    <detail-op-bar :paper='paperInfo'></detail-op-bar>
  </div>

  <el-card class="contentCard">
    <div class="mainContent">
      <!--  文章标题-->
      <div>
        <h1 v-show="paperInfo.title !== ''" class="paperTitle">{{ paperInfo.title }}</h1>
        <h1 v-show="paperInfo.title === ''" class="paperTitle">标题未知</h1>
      </div>

      <!--  文章作者与单位-->
      <div class="authorAndInst">
        <div class="author">
          <p v-show="authors.length<=0">暂无作者信息</p>
          <a v-show="authors.length>0" class="author" v-for="i in authors" :href="jumpToPortalUrl(i.authorId)"> {{i.author}} </a>
        </div>

        <div class="author">
          <p v-show="authors.length<=0">暂无机构信息</p>
          <a v-show="authors.length>0" class="insts" v-for="i in authors" > {{i.affiliation}} </a>
        </div>
      </div>



      <div>
        <!--        摘要-->
        <div class="abstract">
          <p class="boldText">摘要：</p>
          <p class="abstractText">{{paperInfo.abstract_===null ? '暂无摘要' : paperInfo.abstract_}}</p>
        </div>


        <!--      领域-->
        <el-container>
          <p class="boldText">学科领域：</p>
          <p class="abstractText">{{fieldInfo === ''? '暂无本文领域信息' : fieldInfo}}</p>
        </el-container>
      </div>
    </div>
  </el-card>

</template>

<script>
import DetailOpBar from "@/detail/components/DetailOpBar";
import axios from "@/utils/MyAxios";
import qs from "qs";
export default {
  name: "DetailContent",
  data() {
    return {
      paperId: -1,
      // paperTitle: "我是文章标题",
      // authors: [
      //   {name: "作者1", url: '/tap1'},
      //   {name: "作者2", url: '/test2'},
      //   {name: "作者3", url: '/test3'},
      // ],
      institutes: [
        {name: "北京航空航天大学", url: '/school1'},
      ],
      paperKeywords: [
        {name: '关键词1', url:'/key1'},
        {name: '关键词2', url:'/key2'},
      ],

      // paperInfo: {},
      // paperRefs: [],
      // isPaperExist: false
    }
  },
  props: ['paperInfo', 'authors'],
  computed: {
    fieldInfo() {
      let str = this.paperInfo.fields
      let output = ''
      for (let item in str) {
        // console.log(str[item]);
        output += str[item] + ';  '
      }
      return output
    }
  },
  components: {
    DetailOpBar,
  },
  mounted() {
    // this.getPaperInfo()
    this.paperId = this.$route.query.paperId

  },
  methods: {
    // 获取学术成果详情

    // getPaperInfo() {
    //   let data = {
    //     paperId: this.$route.query.paperId
    //     // paperId: 2751981240
    //   }
    //   // 获取信息
    //   axios.post('/api/paper/info', qs.stringify(data)).then(res => {
    //     this.isPaperExist = false
    //     console.log(res)
    //     if (res.data.code === 0) {
    //       this.isPaperExist = true
    //       this.paperInfo = res.data.data
    //       this.authors = res.data.data.authors
    //       console.log(this.paperInfo.journal)
    //     }
    //     else if (res.data.code === 1) {
    //       console.log("论文被作者删除")
    //     }
    //     else {
    //       console.log("获取论文详情ERR")
    //     }
    //   })
    //
    // },

    // 获取论文参考
    // getPaperRefs() {
    //   let data = {
    //     paperId: this.$route.query.paperId
    //   }
    //   axios.post('/api/paper/ref', qs.stringify(data)).then(res => {
    //     console.log(res);
    //     if (res.data.code === 0) {
    //       this.paperRefs = res.data.data
    //     }
    //     else {
    //       console.log("获取论文参考ERR")
    //     }
    //   })
    // },

    jumpToPortalUrl(authorId) {
      // console.log(authorId);
      return '/portal?authorId=' + authorId
    },

  }

}
</script>

<style scoped>

  .contentCard {
    margin-top: 2%;
    margin-left: 10%;
    margin-right: 10%;
  }

  .paperTitle {
    alignment: center;
    font-weight: normal;
    font-size: 250%;
    text-align: center;
  }

  .authorAndInst {
    display: flex;
    flex-direction: column;
  }

  .author {
    padding: 10px;
    alignment: center;
    text-align: center;
    font-size: large;
    background-color: #ffffff00;
  }

  .mainContent {
    margin-left: 2%;
    margin-right: 2%;
  }

  .boldText {
    font-weight: bold;
    white-space: nowrap;
    font-size: large;
  }

  .abstract {
    display: flex;
    align-items: baseline;
  }

  .abstractText {
    margin-left: 30px;
    font-size: large;
    font-family: "Times New Roman";
    text-align: justify;
  }

  .insts {
    font-style: oblique;
    padding: 10px;
  }

</style>